<template>
<div class="seach">
  <div class="top">
         <div class="left"><span @click="back"></span></div>
         <div class="center"><form action="/">
  <van-search
 @cancel="onCa"
    v-model="value"
    :placeholder="scarch"
    show-action
     @search="onSearch"
    @input="onCancel"
  />
</form>
         <!-- <div class="title">{{scarch}}</div> -->
         </div>
         <div class="right"><span></span></div>
      
  </div>
  <div class="rm" v-if="list_dat">
<div class="rm_title">
    <span>热门搜索</span>
    <span @click="yc" class="span" v-html="msg"></span>
</div>
<div class="rm_list" v-show="show">
    <ul>
        <li v-for="(ite,index) in item" :key="index" @click="btn(ite)">{{ite}}</li>

    </ul>
</div>
<div class="clear"></div> 
  </div>
  <div class="seachIyem" v-else>
      <ul>

          <li v-show="item.key" v-for="(item,index) in list" :key="index">
              <div class="seachIyem-left">{{item.key}}</div>
              <div class="seachIyem-right" v-if="item.key">
                  <span v-for="(it,ind) in item.tag" :key="ind">{{it.tsh}}</span>
              </div>
          </li>
      </ul>
  </div>
  </div>
</template>
<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      scarch:"",
      item:"",
      show:true,
      msg:"隐藏",
      value:"",
    list:"",
    list_dat:true,
    
    }
  },
  methods:{
back(){
  this.$router.go(-1)
    },


      btn(index){
console.log(index);
  var self=this
 $.ajax({
                type: "get",
                url: `https://wq.jd.com/bases/searchdropdown/getdropdown?terminal=m&zip=1&key=${index}&newjson=1&_=1626090498210&sceneval=2&callback=jsonpCBKC`,
                dataType: "jsonp",
                //这两句指定回调函数为：CallBackUser
                jsonp: 'callback',
                jsonpCallback: 'jsonpCBKC',
                success: function (data) {
                self.list=data
              self.list_dat=false
                }
            });
      },
    onCa() {
    this.list_dat=true
    },
      onCancel(e){
  var self=this
  var da=e.target.value
 $.ajax({
                type: "get",
                url: `https://wq.jd.com/bases/searchdropdown/getdropdown?terminal=m&zip=1&key=${da}&newjson=1&_=1626090498210&sceneval=2&callback=jsonpCBKC`,
                dataType: "jsonp",
                //这两句指定回调函数为：CallBackUser
                jsonp: 'callback',
                jsonpCallback: 'jsonpCBKC',
                success: function (data) {
                self.list=data
              self.list_dat=false
                }
            });
      },
      yc(){
this.show=!this.show
if (this.show==false) {
this.msg="显示"
}else{
 

this.msg="隐藏"
}
      }
  },
  mounted(){
      var self=this


 $.ajax({
                type: "get",
                url: "https://wq.jd.com/bases/searchhotword/GetHotWords?_=1626076768603&sceneval=2&callback=jsonpCBKB",
                dataType: "jsonp",
                //这两句指定回调函数为：CallBackUser
                jsonp: 'callback',
                jsonpCallback: 'jsonpCBKB',
                success: function (data) {
                    self.item=data.owner
                }
            });


      //
    $.ajax({
                type: "get",
                url: "https://wq.jd.com/bases/searchpromptwords/searchpromptwords?_=1626074343416&sceneval=2&callback=jsonpCBKA",
                dataType: "jsonp",
                //这两句指定回调函数为：CallBackUser
                jsonp: 'callback',
                jsonpCallback: 'jsonpCBKA',
                success: function (data) {
                 
                   var a=0
                   self.scarch=data.searchwords[0].searchword
                     setInterval(()=>{

                       if (a>=data.searchwords.length) { 
                         a=0
                       }else{
 self.scarch=data.searchwords[a].searchword
                                 a++
                       }
                     },5000)
                
                }
            });
  }
}
</script>
<style  scoped>

.seach{
width: 10rem;
height: 667px;
z-index: 9999;
background:rgb(246, 246, 246);
}
.seach .rm{
    width: 10rem;
    margin: .4rem 0 0;
    /* padding: 0 0 .266667rem .346667rem; */
padding-bottom: .533333rem;
    background: white;
    display: block;
    box-sizing: border-box;
}
 .seach .top{
        height: 1.2rem;
        width: 10rem;
        background: rgb(200, 37, 25);
        position: relative;
    }
    .rm_title{
        font-size: .4rem;
        position: relative;
        height: .746667rem;
        padding: .08rem .4rem .293333rem 0;
        background: white;
    }
    .rm_title span{
        position: absolute;
    }
    .rm_title span:nth-child(1){
        left: .346667rem;
        color: #232326;
    }
    .rm_title span:nth-child(2){
     right: .373333rem;
     color: #999999;
    }
    .clear{ clear:both} 
    .rm_list{
        width: 10rem;
    display: block;
        background: coral;

    }
    .rm_list li{
        /* width: 2.293333rem; */
        /* height: .613333rem; */
        font-size: .373333rem;
          padding: 0px 18px;
          box-sizing: border-box;
        background: #F0F2F5;
        float: left;
        color: #686868;
        margin-left: .133333rem;
        margin-top: .266667rem;
    }
    .left{
        width: 1.066667rem;
        height: 1.2rem;
    background: rgb(200, 37, 25);
       position: absolute;
       left: 0;
     
    }
    .top .left span{
 width: .533333rem;
    height: .666667rem;
    display: inline-block;
    background: url() no-repeat 50%;
    background-position:.133333rem -0.053333rem;
    background-size: contain;
    position: absolute;
    top: 10px;
    }
    .van-search{
        padding: 0;
    }
   .top .center{
       left: 1.066667rem;
       right: 1.066667rem;
       top: .106667rem;
       position: relative;
bottom: 0;
text-align: center;
font-size: .48rem;
       background: rgb(200, 37, 25);
        position: absolute;
    }
     .top .center img{
         width: 100%;
    height: .906667rem;
     }
     .top .center .title{
       position: absolute;
      
    top: .133333rem;
    left: 2.213333rem;
    color: gray;

     }
    .top .right{
        width: 1.066667rem;
        height: 1.2rem;
      background: rgb(200, 37, 25);
         position: absolute;right: 0;
    }
    .top .right span{
            display: inline-block;
    margin: .32rem .16rem .32rem .266667rem;
    width: .533333rem;
    height: .533333rem;
    background: url() no-repeat 50%;
    background-size: .533333rem;
    }
.seachIyem{
    width: 10rem;
    background: gold;
    /* height: 500px; */
   
}
.seachIyem li{
    height: 1.12rem;
    width: 10rem;
    background: white;
  /* padding-left: .4rem;
  padding-right: .4rem; */
  padding: .266667rem;
    box-sizing: border-box;
}
.seachIyem-left{
float: left;
font-size: .346667rem;

}
.seachIyem-right{
float: right;
}
.seachIyem-right span{
font-size: .32rem;
display: block;
float: left;
background: gold;
padding:.106667rem .266667rem;
margin-left: 5px;
}
</style>
